<template>
    <!-- <h3>Hello World</h3> -->
    <input id='demo' type="checkbox" @change="shows">
    <label for="demo"></label>
</template>

<script>
export default {
    props:['show'],
    methods:{
        shows(){
            let check = document.getElementById('demo').checked
            this.show(check)
        }
    }
}
</script>

<style>
    input[type="checkbox"]{
        display: none;
    }
    label{
        width: 140px;
        height: 50px;
        background-color: white;
        display: block;
        position:relative;
        border-radius: 30px;
        transition: .5s;
        margin-left: 40%;
        
    }
    label::after{
        content:'';
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: black;
        display: block;
        position: absolute;
        top: 10px;
        left: 2px;
        transition: .5s;
    }
    input[type="checkbox"]:checked~label{
        background-color: black;
    }
    input[type="checkbox"]:checked~label::after{
        background-color: #555;
        transform: translateX(100px);
    }
        
    
</style>